<!--  -->
<template>
  <div>
    <h1>Vuex的使用案例</h1>
    <!-- <h2>当前的求和为:{{countAbout.sum}}</h2> -->
    <h2>当前的求和为:{{sum}}</h2>
    <h2>当前求和放大十倍:{{bigSum}}</h2>
    <hr />
    <!-- <h3>我在跟着{{countAbout.str2}}学习{{countAbout.str1}}</h3> -->
    <h3>我在跟着{{str2}}学习{{str1}}</h3>
    <select name=""
            v-model.number="n">
      <!-- v-model收集的n的值是字符串，可以用number限定符 -->
      <!-- 第二种解决办法:就是给value绑定v-bind:value,这样取到的值就是数字 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <!-- 借助使用助手函数必须需要传递数值给后面方法 -->
    <!-- <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button> -->
    <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <!-- <button @click="incrementOdd(n)">当为基数是加</button>
    <button @click="incrementWait(n)">异步操作加法</button> -->
    <button @click="jiaOdd(n)">当为基数是加</button>
    <button @click="jiaWait(n)">异步操作加法</button>
    <h2 style="color:red">下面person组件的人数总和一共是:{{personList.length}}</h2>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data () {
    return {
      // 增加的步进
      n: 1,
    }
  },
  computed: {
    // 第一种写法：直接引入模块化，然后在template里面直接写countAbout.sum等
    // ...mapState({ countAbout: "countAbout" }),
    // 第二种方法：使用namespaced命名空间
    ...mapState('countAbout', ['sum', 'str1', 'str2']),
    ...mapState('personAbout', ['personList']),

    ...mapGetters('countAbout', ['bigSum'])
  },
  methods: {
    // -------------------使用mapMutations--------------------------
    ...mapMutations('countAbout', ['JIA', "JIAN"]),
    ...mapActions('countAbout', ['jiaOdd', 'jiaWait'])
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {


    // 2.数组写法
  }
}
</script>
<style scoped>
</style>